$(function () {
    class Detail {
        constructor() {
            this.name = $(".goods-detail .basic-info-wrap h1");
            this.bread = $(".breadcrumb .active")
            this.price = $("#xsgood_price")
            this.desc = $(".goods-detail .basic-info-wrap .desc");
            this.mid_img_box = $(".magnifier-container");
            this.small_img_scroll = $(".animation03")
            this.info_box = $("#tab_detail p");
            this.cart_btn = $(".js-add-cart");
            this.incre = $(".increase");
            this.des = $(".decrease");
            this.buynum = $("#buy_number")
            this.TOKEN = cookie("TOKEN");
            this.cart_data = this.getCartData()
            console.log(this.cart_data);
            this.id = parseInt(location.hash.split("=")[1]);
            this.data = [];
            
            this.rander();
        }

        bindEvent(id, data) {

            this.incre.on("click", () => {
                let num = this.buynum.val()
                this.buynum.val(++num)
            })

            this.des.on("click", () => {
                let num = this.buynum.val();
                if(num != 1)
                    this.buynum.val(--num);
            })

            this.cart_btn.on("click", () => {
                if (this.TOKEN.length !== 0) {
                    this.addCart(id, data);
                    alert("成功加入购物车");
                } else {
                    alert("请先登录")
                    location.href = "./login.html";
                }
            })

            
        }

        save() {
            localStorage.setItem("cart", JSON.stringify(this.cart_data));
        }

        addCart(id, data) {
            // 判断当前的id是否存在于购物车列表之中
            if (id in this.cart_data) {
                // 如果存在就让商品数量自增; 
                this.cart_data[id].count++;
            } else {
                // 如果不存在就放入一个初始数据; 
                data.count = this.buynum.val();
                this.cart_data[id] = data;
            }
            this.save();
        }

        getCartData() {
            try {
                let data = JSON.parse(localStorage.getItem("cart"))
                if (data === null) {
                    return {}
                }
                return data;
            } catch (e) {
                return {};
            }
        }

        rander() {

            $.getJSON("../../static/data/details.json", (xhr) => {
                console.log(xhr);
                console.log(xhr.length);
                for (var i = 0; i < xhr.length; i++) {
                    if (this.id == xhr[i].id) {
                        this.price.text(xhr[i].price)
                        this.name.text(xhr[i].name);
                        this.bread.text(xhr[i].name);
                        this.desc.text(xhr[i].desc);
                        let pic = `<div class="images-cover"><img src=${xhr[i].pics[0].big} width="366" height="366" ></div>
                            <div class="move-view" style="width: 100px; height: 100px; left: 0px; top: 338.5px; display: none;"></div>`

                        this.mid_img_box.html(pic);
                        let small_pic = ``
                        for (let j = 0; j < xhr[i].pics.length; j++) {
                            small_pic += `<li>
                                    <div class="small-img">
                                        <img src=${xhr[i].pics[j].big}>
                                    </div>
                                    </li >`
                        }
                        this.small_img_scroll.html(small_pic);

                        let des_pic = ``
                        for (var k = 0; k < xhr[i].depics.length; k++) {
                            des_pic += `<img data-echo=${xhr[i].depics[k].img} title="1565320598930943.jpg" alt="11_01.jpg">`

                        }

                        this.info_box.html(des_pic);

                        this.data = {
                            id: xhr[i].id,
                            src: xhr[i].pics[0].big,
                            name: xhr[i].name,
                            price: xhr[i].price,
                            count: Number(this.buynum.val()),
                        }

                        break;
                    }
                }
                this.bindEvent(this.id, this.data)
                Echo.init({
                    offset: 0,
                    throttle: 100,
                })
            })

        }

        // waterFall(i){

        // }

    }

    new Detail();
})